<template>
    <div class="main">
        <!-- test -->
        <div class="test">
            <div class="test-category">
                <div class="category" v-for="item in typeData" :key="item._id" @click="goPage(item._id)">
                    <div class="img">
                        <img :src="item.icon" alt="">
                    </div>
                    <p>{{ item.type }}</p>
                </div>
            </div>
        </div>
        <!-- serious -->
        <div class="serious">
            <p class="p1">EXAMINATION</p>
            <p class="p2">严肃考试</p>
            <div class="serious-content">
                <div class="serious-img">
                    <img src="../../assets/images/home/img-1.png" alt="">
                </div>
                <div class="serious-text">
                    <p>适用于高校考试、认证考试、招聘考试等严格防作弊场景
                        学员考前调试设备，本地备份答案及云端同步，断电断网续考
                        人脸识别与权威数据库比对，AI监考中心三路音视频实时监考
                        支持匿名判卷及分题分学员判卷，避免判卷过程的舞弊行为 "
                    </p>
                    <el-button>探索更多</el-button>
                </div>
            </div>
        </div>
        <!-- data -->
        <div class="data">
            <p class="p1">DATA STATISTICS</p>
            <p class="p2">数据统计</p>
            <div class="count">
                <div class="circular">
                    <div class="circular-data">
                        <img src="../../assets/images/home/c1.png" alt="">
                    </div>
                    <p>练习题数</p>
                </div>
                <div class="circular">
                    <div class="circular-data">
                        <img src="../../assets/images/home/c2.png" alt="">
                    </div>
                    <p>学习天数</p>
                </div>
                <div class="circular">
                    <div class="circular-data">
                        <img src="../../assets/images/home/c3.png" alt="">
                    </div>
                    <p>最近考试</p>
                </div>
                <div class="circular">
                    <div class="circular-data">
                        <img src="../../assets/images/home/c4.png" alt="">
                    </div>
                    <p>平均分数</p>
                </div>
            </div>
        </div>
        <!-- exam -->
        <div class="exam">
            <p class="p1">ANNOUNCEMENT</p>
            <p class="p2">考试公告</p>
            <div class="exam-content">
                <div class="img">
                    <img src="../../assets/images/home/img-2.png" alt="">
                </div>
                <div class="content">
                    <div class="button">
                        <span class="btn1">全部</span>
                        <span class="btn2">最近</span>
                        <span class="btn3">一个月前</span>
                    </div>
                    <div class="news">
                        <div class="title">2022年安徽公务员考试公告</div>
                        <div class="context">
                            关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告为认真贯彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...
                        </div>
                    </div>
                    <div class="news">
                        <div class="title">2022年安徽公务员考试公告</div>
                        <div class="context">
                            关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告为认真贯彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...
                        </div>
                    </div>
                    <div class="news">
                        <div class="title">2022年安徽公务员考试公告</div>
                        <div class="context">
                            关于推迟安徽省2022年度考试录用公务员和选调生笔试工作的公告为认真贯彻落实安徽省新冠肺炎疫情防控部署要求,切实做好疫情防控工作,保障广大...
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            typeData: [],
        }
    },
    methods: {
        goPage(id) {
            console.log("考试",id);
            this.$router.push({
                path: "/home/test",
                query: {
                    id:id
                }
            }
            )
        }

    },
    async created() {
        //获取分类列表数据
        const res = await this.$api.type.getTypes({});
        this.typeData = res.data;
        console.log("rew", res.data);
    },
}
</script>

<style lang="scss" scoped>
.main {
    width: 100%;

    .test {
        width: 100%;
        height: 480px;
        background-image: url(../../assets/images/home/system-bg.png);
        background-size: 1260px 400px;
        background-repeat: no-repeat;

        .test-category {
            width: 960px;
            height: 200px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            position: relative;
            top: 300px;
            left: 120px;

            .category {
                width: 150px;
                height: 150px;
                border-radius: 10px;
                background-color: white;

                .img {
                    width: 80px;
                    height: 80px;
                    margin: auto;
                    margin-top: 20px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

            }
        }
    }

    //serious
    .serious {
        width: 960px;
        height: 300px;
        margin: auto;
        margin-top: 20px;

        .p1 {
            font-family: SourceHanSansCN-Regular;
            font-size: 20px;
            color: #000000;
            opacity: 0.15;
        }

        .p2 {
            font-size: 19px;
            color: #373737;
            position: relative;
            top: -45px;
            margin: 0;
        }

        .serious-content {
            width: 960px;
            height: 210px;
            display: flex;

            .serious-img {
                width: 260px;
                height: 210px;
                margin-left: 120px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .serious-text {
                width: 410px;
                height: 210px;
                margin-left: 100px;
                font-size: 17px;
                color: #666666;
            }
        }
    }

    //data
    .data {
        width: 100%;
        height: 480px;
        background-image: url(../../assets/images/home/bg.png);
        background-size: 1260px 400px;
        background-repeat: no-repeat;

        .p1 {
            font-family: SourceHanSansCN-Regular;
            font-size: 20px;
            color: #000000;
            opacity: 0.15;

            position: relative;
            top: 105px;
        }

        .p2 {
            font-size: 19px;
            color: #373737;
            position: relative;
            top: 60px;
            margin: 0;
        }

        .count {
            width: 960px;
            height: 200px;
            position: relative;
            top: 80px;
            margin: auto;
            display: flex;
            justify-content: space-evenly;

            .circular {
                width: 220px;
                height: 180px;

                .circular-data {
                    width: 140px;
                    height: 140px;
                    border-radius: 50%;
                    background-color: #726fff;
                    opacity: 0.33;
                    position: relative;
                    left: 40px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    //exam
    .exam {
        width: 100%;
        height: 330px;

        .p1 {
            font-family: SourceHanSansCN-Regular;
            font-size: 20px;
            color: #000000;
            opacity: 0.15;
            position: relative;
            top: -50px;
        }

        .p2 {
            font-size: 19px;
            color: #373737;
            position: relative;
            top: -95px;
            margin: 0;
        }

        .exam-content {
            width: 800px;
            height: 280px;
            margin: auto;
            display: flex;
            justify-content: space-evenly;
            margin-top: -60px;

            .img {
                width: 380px;
                height: 280px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                width: 410px;
                height: 280px;
                border: 1px solid grey;
                border-left: 0px;

                .button {
                    width: 200px;
                    margin-top: 15px;

                    span {
                        border: 1px solid blue;
                        border-radius: 7px;
                        padding: 3px;
                        text-align: center;
                        font-size: 12px;
                        color: #726fff;
                        margin-left: 10px;
                    }

                    .btn1 {
                        background-color: blue;
                        color: white;
                    }
                }

                .news {
                    width: 410px;
                    height: 70px;
                    border-bottom: 1px solid gray;
                    margin-top: 10px;

                    .title {
                        width: 196px;
                        height: 19px;
                        font-size: 15px;
                        color: #373737;
                        margin-bottom: 10px;

                    }

                    .context {
                        width: 410px;
                        height: 41px;
                        font-size: 12px;
                        color: #666666;
                    }
                }
            }

        }
    }
}
</style>